<template>


  <div class="yl-clearfix">
    <div class="searchgrid">

      <input value=" 新增 " type="button" class="yl-input-button yl-float-left" @click="handleAddEmployeeOfThisAgent" v-show="!$route.query.agent_id">
      <div class="yl-float-right">
        <input class="yl-input-text" v-model="filters.keyword" type="text" placeholder="ID/员工编号/手机号">
        <input value=" 查询 " type="button" class="yl-input-button" @click="fetchEmployeeList">
      </div>
    </div>
    <div class="tab-content default-tab yl-clearfix" style="display: block;">
      <el-table :data="pagination.data"
                v-loading="listLoading"
                style="width: 100%;">
        <el-table-column prop="id" label="ID">
        </el-table-column>
        <el-table-column prop="name" label="员工编号">
        </el-table-column>
        <el-table-column prop="employee_name" label="员工姓名">
        </el-table-column>
        <el-table-column prop="phone" label="员工电话">
        </el-table-column>



        <el-table-column label="状态">
          <template scope="scope">
            <span v-text="calculateEmployStatus(scope.row)"></span>
          </template>
        </el-table-column>

        <el-table-column prop="role.role_name" label="角色">
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button size="mini" @click="handleEditEmployee(scope.row)" icon="edit" title="代理修改"></el-button>
            <el-button v-if="false" size="mini" @click="handlePlayEmployee(scope.row)" title="扮演代理"><i class="fa fa-play-circle"></i></el-button>
          </template>
        </el-table-column>
      </el-table>


      <div class="yl-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          :page-sizes="[15, 30, 45, 60]"
          :page-size="parseInt(pagination.per_page)"
          :total="pagination.total"
          style="float:right;">
        </el-pagination>
      </div>

    </div>
  </div>

</template>

<script>
  import {rolePlayIssueToken, getUserList} from '../../api/user';
  import {TOKEN_OBJ_ID} from '../../common/tools';

  export default {
    data() {
      return {
        filters: {
          keyword: '',
          page: 1,
          size: 15,
          agent_id: 0,
        },
        pagination: {},
        listLoading: false,
      }
    },
    watch: {
      '$route': function (newRoute, oldRoute) {
        if (oldRoute.name == '员工创建') {
          alert(oldRoute.name)
          this.fetchEmployeeList();
        }
        this.fetchEmployeeList();
      },
    },
    methods: {
      handlePageChange(clickPageIndex) {
        //分页页面发生改变
        this.filters.page = clickPageIndex;
        this.fetchEmployeeList();
      },
      handleSizeChange(size) {
        this.filters.size = size;
        this.filters.page = 1;
        this.fetchEmployeeList();
      },
      //获取用户列表
      fetchEmployeeList() {
        this.filters.agent_id = this.$route.query.agent_id;
        let params = this.filters;
        this.listLoading = true;
        getUserList({params}).then((res) => {
          this.pagination = res.data;
          this.listLoading = false;
        }).catch(error => {
          this.ezNotifyAxiosCatch(error)
        });
      },
      //计算状态
      calculateEmployStatus(row) {
        return row.is_forbid > 0 ? '禁用' : '正常';
      },
      //计算员工分成比例
      calculatePercentage(row, type) {
        let percentage = '';
        if (!row.percentages) {
          return percentage;
        }
        row.percentages.forEach(value => {
          if (value.type == type) {
            percentage = value.percentage
          }
        })
        return percentage;
      },
      //添加员工
      handleAddEmployeeOfThisAgent: function () {
        let query = this.$route.query;
        this.$router.push({path: '/employee/create', query});
      },
      //编辑员工
      handleEditEmployee: function (row) {
        this.$router.push({name: '员工修改', params: {id: row.id}});
      },
      //扮演员工
      handlePlayEmployee: function (row) {
        rolePlayIssueToken({employ_id: row.id}).then(res => {
          if (res.status == 1) {
            localStorage.clear()
            sessionStorage.clear()

            let someString = JSON.stringify({access_token: res.data.accessToken});
            sessionStorage.setItem(TOKEN_OBJ_ID, someString);
            localStorage.setItem(TOKEN_OBJ_ID, someString);

            this.$bus.$emit('dumb-update-user-info')
            this.$router.replace({path: '/agent/recommend/code'});
          } else {
            this.ezNotifyAxiosThen(res)
          }
        });
      },
    },
    mounted() {
      this.fetchEmployeeList();
    }
  }
</script>

